Skip to main content

Edit Layout

Edit Layout feature in Pages provide you with a user-friendly and intuitive interface to customize the arrangement and positioning of various elements and components within a web application page.

For example, in the Edit Layout option, you can easily modify the arrangement of elements, such as buttons, text fields, images, and other components, to design a seamless and intuitive user experience.

To Edit Page Layout

  1. Go to the required Web Applications > Edit > Pages.
  2. In the Pages, click on Edit Layout icon , you will be redirected to the Page Layout Editor and do the required page layout edits.
  3. Click on Save to proceed with saving the page layout edits after you complete the necessary edits.
Page Layout Editor

Page Layout Editor

 

Items Description
The left pane of the page layout editor includes the predefined UI Elements, Widgets, and Advanced features like audio, currency, decimal, and formula, etc. along with a search functionality for easy use.

In the center pane, you can design the page layouts. Drag and drop the desired elements from the left pane to the center pane proceed with the page layout edit and associate with the necessary Element Hierarchy pane actions.

It includes a navigation arrow to go back to the Pages dashboard and you can also rename the web application page.

The top pane includes the following options.

  • Data Sources: Add data sources to the page layout editor.
  • Page Specific Styles: Add page specific styles if applicable using this functionality.
  • Page Props: Add Json Data for page props input.
  • Preview: Shows the preview of the edited page.
  • Save: Click on Save to proceed with saving the page layout edits.
  • Cancel: Click on Cancel to abort the page layout edits.

The Element Hierarchy pane includes the below list of selections to consider for page layout.

  • Style Classes: Select the style classes.
  • On Click Actions: Add on click actions.
  • Dynamic Rendering: TBD
  • Page: Select the web application page available in Pages dashboard to include in the layout. You can also view the pages from here before you insert them into the page layout.
  • Change Route: TBD
  • Page Properties: Add page properties such as Key and Value.
  • Validations: TBD
  • Hide: TBD
  • CSS Styles: Customize the color, font, font size, width, height, border style, border width, border color, alignment, background, background image, padding, and margin using CSS styles as needed.
  • Attributes: Add Name and Value as needed. TBD                       

Top of page